<template>
  <div>
    <a-card :bordered="false">
      <detail-list title="充值送积分">
        <a-row>
          <a-col :span="24" style="margin-top: 15px">
            <a-switch v-model="RechargeConfig.isRecharge" />
            充
            <a-input style="width: 200px" property="请输入金额" v-model="RechargeConfig.rechargeAmount"></a-input>
            元送
            <a-input style="width: 200px" property="请输入数量" v-model="RechargeConfig.amountPoints"></a-input>
            积分
          </a-col>
        </a-row>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="充值送优惠券">
        <a-switch v-model="RechargeConfig.isCoupon" />
        充
        <a-input style="width: 200px" property="请输入金额" v-model="RechargeConfig.couponAmount"></a-input>
        元送优惠券
      </detail-list>
      <div style="padding:15px 0 10px;">
        <a-button type="primary" @click="addCoupon">选择优惠券</a-button>
      </div>
      <a-table :columns="columns" rowKey="couponId" :dataSource="RechargeConfig.couponItem" :pagination="false">
        <span slot="action" slot-scope="text, record,index">
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(index)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>

      <!-- fixed footer toolbar -->
      <footer-tool-bar>
        <a-button type="primary" @click="sureSubmit" :loading="loading">保存修改</a-button>
      </footer-tool-bar>
    </a-card>
    <mms-coupon-ref ref="modalSet" :selectionType="'checkbox'" @ok="modalOk" />
  </div>

</template>

<script>

import FooterToolBar from '@/components/tools/FooterToolBar'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import { postAction, getAction } from "@api/manage"
import MmsCouponRef from './modules/MmsCouponRef'

const DetailListItem = DetailList.Item


const columns = [
  {
    title: '优惠券Id',
    dataIndex: 'id'
  },
  {
    title: '优惠券名',
    dataIndex: 'name'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: "center",
    fixed: "right",
    width: 147,
    scopedSlots: { customRender: 'action' }
  }
]


export default {
  components: {
    FooterToolBar,
    DetailList,
    DetailListItem,
    STable,
    MmsCouponRef
  },
  data () {
    return {
      loading: false,
      columns,
      url: {
        mmsCouponlist: "/mallPlus/mmsCoupon/getCouponIdAndName",
        list: "cmsConfig/queryRecharge",
        edit: "cmsConfig/setRechange"
      },
      //优惠券信息
      RechargeConfig: {
        rechargeAmount: '',
        amountPoints: '',
        isRecharge: '',
        isCoupon: '',
        couponAmount: '',
        couponItem: []
      },
      //所有优惠券信息
      CouponList: {}
    }
  },
  methods: {
    modalOk (rows, keys) {
      const self = this
      this.RechargeConfig.couponItem = rows

    },
    addCoupon () {
      let self = this
      self.$refs.modalSet.visible = true
      self.$refs.modalSet.checkedKeys = []
      self.$refs.modalSet.checkedRows = this.RechargeConfig.couponItem
      for (let i = 0; i < this.RechargeConfig.couponItem; i++) {
        self.$refs.modalSet.checkedKeys.push(this.RechargeConfig.couponItem[i].id)
      }
      self.$refs.modalSet.open()
    },

    sureSubmit () {
      this.loading = true
      postAction(this.url.edit, this.RechargeConfig).then((res) => {
        if (res.success) {
          console.log("修改成功")
          this.$message.success(res.message)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    //获取当前优惠规则信息
    getRechargeConfig () {
      getAction(this.url.list, this.RechargeConfig).then((res) => {
        if (res.success) {
          this.RechargeConfig = res.result
          // this.getSwitchStats();
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleDelete (index) {
      console.log(index)
      this.RechargeConfig.couponItem.splice(index, 1)
    }

  },


  created () {
    this.getRechargeConfig()


  }

}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

tr,
th {
  text-align: center;
  width: 130px;
}
</style>